// src/pages/room/widgets/evaluate/index.tsx
import styles from "@styles/room.module.scss";
import { StarFill, StarOutline } from "antd-mobile-icons";
import TextareaAutosize from "react-textarea-autosize";
import {useState} from "react";
import {useEvaluateDoctorMutation} from "@store/apiSlice/doctorApiSlice";
import {Toast} from "antd-mobile";
interface Props {
    orderId?: string;
    docId?: string;
    updateEvaluate: (score: number) => void;
}
export default function Evaluate({ orderId, docId,updateEvaluate }: Props) {
    const [formState,setFormState] = useState<Pick<EvaluateDoctorParams, "score" | "content" | "anonymousFlag">>({
        anonymousFlag: 0,
        score: 0,
        content: "",
    })
    // 用于记录选择的评分
    const setScore = (score: number) => {
        setFormState({ ...formState, score });
    };
    // 用于实现评价
    const [evaluateDoctor] = useEvaluateDoctorMutation();
    // 提交评价
    const evaluate = () => {
        // 提交前的验证操作
        if (formState.score === 0) return Toast.show({ content: "请选择评价分数" });
        if (formState.content.trim() === "") return Toast.show({ content: "请输入评价内容" });
        if (typeof orderId === "undefined") return Toast.show({ content: "订单未找到" });
        if (typeof docId === "undefined") return Toast.show({ content: "医生未找到" });
        // 发送请求提交评价
        evaluateDoctor({
            docId,
            orderId,
            score: formState.score,
            content: formState.content,
            anonymousFlag: formState.anonymousFlag,
        }).then(() => {
            // 更新本地评价消息的类型
            updateEvaluate(formState.score);
            Toast.show({ content: "评价成功" });
        });
    };
    return (
        <div className={styles.appraise}>
            <h4 className={styles.title}>医生服务评价</h4>
            <p className={styles.question}>本次在线问诊服务您还满意吗？</p>
            <div className={styles.stars}>
                {Array.from({ length: 5 }, (v, k) => k + 1).map((item) =>
                    item <= formState.score ? (
                        <StarFill key={item} onClick={() => setScore(item)} />
                    ) : (
                        <StarOutline key={item} onClick={() => setScore(item)} />
                    )
                )}
            </div>
            <div className={styles.wrapper}>
                {/* 评价内容区域 */}
                <TextareaAutosize
                    className={styles.content}
                    placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"
                    value={formState.content}
                    onChange={(event) => {
                        if (event.target.value.length <= 150) {
                            setFormState({ ...formState, content: event.target.value });
                        }
                    }}
                />
                <div className={styles.total}>{formState.content.length}/150</div>
            </div>
            <div className={styles.meta}>
                <label className={styles.unKnow}>
                    <input
                        type="checkbox"
                        checked={formState.anonymousFlag === 1}
                        onChange={(event) =>
                            setFormState({
                                ...formState,
                                anonymousFlag: event.target.checked ? 1 : 0,
                            })
                        }
                    />
                    <span>匿名评价</span>
                </label>
                <button className={styles.submit} onClick={evaluate}>提交评价</button>
            </div>
        </div>
    );
}